<template>
  <div class="background">
    <div class="login-box">
      <div style="margin-top: 50px">
        <span class="login-select" @click="login1">手机号登录</span>
        <span style="font-weight: bold;font-size: 20px">&ensp;|&ensp;</span>
        <span class="login-select" @click="login2">账号密码登录</span>
      </div>
      <div class="login-type" v-if="loginType === 1">
        <el-form :model="formData" :rules="formDataRules" ref="form" label-width="100px" class="demo-ruleForm">
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="formData.phone"></el-input>
          </el-form-item>
          <el-form-item label="验证码" prop="code">
            <div class="ok-box-center">
              <el-input v-model="formData.code"></el-input>
              <el-button type="primary" @click="getPhoneCode" style="width: 120px;margin-left: 10px">{{phoneText}}</el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <div class="login-type" v-else>
        <el-form :model="formData2" :rules="formDataRules2" ref="form2" label-width="100px" class="demo-ruleForm">
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="formData2.phone"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <div class="ok-box-center">
              <el-input v-model="formData2.password"></el-input>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <div class="ok-box-center">
        <el-button type="success" @click="login" style="width: 120px;">登录</el-button>
      </div>

    </div>

  </div>
</template>
<script>
import axios from "axios";
import api from "@/api/manage"
import router from "@/router";
import Cookies from "js-cookie";
import ok from "@/assets/ok";
export default {
  data(){
    return{
      formData:{
        phone:"",
        code:""
      },
      formData2:{
        phone:"",
        password:""
      },
      phoneText:"获取验证码",
      phoneTime:20,
      formDataRules:{
        phone:[
          { required: true, message: '请输入手机号', trigger: 'blur' },
        ],
        code: [
          { required: true, message: '请输入验证码', trigger: 'blur' },
        ]
      },
      formDataRules2:{
        phone:[
          { required: true, message: '请输入手机号', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
        ]
      },
      loginType:1,
    }
  },
  mounted() {
    this.checkStatus();
  },
  methods:{
    checkStatus(){
      if (ok.tool.getStatus()){
        this.$router.push('/views/manage/product/list')
      }
    },
    login1(){
      this.loginType = 1;
      this.formData2.phone = "";
      this.formData2.password = ""
    },
    login2(){
      this.loginType = 2;
      this.formData.phone = "";
      this.formData.code = ""
    },
    login(){
      if (this.loginType === 1){
        this.$refs.form.validate((valid)=>{
          if (valid){
            api.userLogin(this.formData).then(res =>{
              if (res){
                Cookies.set('Token', res.result.tokenValue);
                Cookies.set('id',res.result.loginId);
                this.$router.push('/views/manage/product/list');
                this.$message.success("登陆成功！")
              }
            }).catch(()=>{
              this.$message.error("手机号验证码错误")
            })
          }
        })

      }else{
        this.$refs.form2.validate((valid)=>{
          if (valid){
            api.userLogPwd(this.formData2).then(res =>{
              if (res){
                Cookies.set('Token',res.result.tokenValue);
                Cookies.set('id',res.result.loginId);
                this.$router.push('/views/manage/product/list');
                this.$message.success("登陆成功！")
              }
            }).catch(()=>{
              this.$message.error("手机号或密码错误")
            })
          }
        })
      }

    },
    getPhoneCode() {
      if (this.phoneTime != 20) return;
      api.getPhoneCode({phone:this.formData.phone}).then(res =>{
        if (res){
          this.phoneTime = 19;
          this.$message({
            message:"已成功发送手机验证码",
            type:'success'
          });
          this.sendPhoneTime()
        }
      })
    },
    sendPhoneTime() {
      this.phoneText = this.phoneTime + "秒后重试";
      this.phoneTime--;
      let _this = this;
      if (this.phoneTime < 0) {
        this.phoneTime = 20;
        this.phoneText = "获取验证码";
      } else {
        setTimeout(function () {
          _this.sendPhoneTime();
        }, 1000);
      }
    },
  }

}
</script>

<style>
.background{
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #292a3a, #536976);
}
.login-box{
  border-radius: 5px;
  position: absolute;
  top: 20%;
  left: 33%;
  width: 34%;
  height: 400px;
  background-color: white;
  //padding: 40px 40px 20px 20px;
}
.login-select{
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
}
.login-type{
  margin: 30px 40px 20px 20px;
}
</style>
